<script setup lang="ts">
import { onMounted, ref } from 'vue'
import BasePageLayout from '@/layouts/BasePageLayout.vue'
import { ENV_CONFIG } from '@/config'

const reactAppUrl = (ENV_CONFIG as any)[import.meta.env.MODE].reactAppUrl

const loadingRef = ref()
onMounted(() => {
  loadingRef.value = document.getElementById('loading-placeholder')
})
</script>

<template>
  <div>
    <BasePageLayout>
      <template #content>
        <div id="loading-placeholder" class="gp__hv-center" style="font-size: 30px;">
          WELCOME TO BE HERE
        </div>
        <WujieVue
          width="100%"
          height="100%"
          name="react-subapp"
          :url="reactAppUrl"
          :sync="true"
          :loading="loadingRef"
        />
      </template>
    </BasePageLayout>
  </div>
</template>

<style lang="less" scoped></style>
